<template>
  <div class="drawer">
    <div class="drawer-tabs">
      <span :class="tabIndex===0 ? 'active' : ''" @click="goTab(0)">{{ $t('task.form.step.0') }}</span>
      <span :class="tabIndex===1 ? 'active' : ''" @click="goTab(1)">{{ $t('task.form.step.1') }}</span>
      <span :class="tabIndex===2 ? 'active' : ''" @click="goTab(2)">{{ $t('task.form.step.2') }}</span>
      <span :class="tabIndex===3 ? 'active' : ''" @click="goTab(3)">{{ $t('task.form.step.3') }}</span>
    </div>
    <a-form :form="form">
      <div v-if="tabIndex===0">
        <div class="drawer-item">
          <div class="drawer-label">
            <label>{{ $t('task.title') }}</label>
          </div>
          <div class="drawer-control">
            <a-form-item>
              <a-input
                v-model="data.title"
                :allow-clear="true"
                :placeholder="$t('enter.please')"
              />
            </a-form-item>
          </div>
        </div>
        <div class="drawer-item">
          <div class="drawer-label">
            <label>{{ $t('task.topic') }}</label>
          </div>
          <div class="drawer-control">
            <a-form-item>
              <a-input
                v-model="data.topic"
                :allow-clear="true"
                :placeholder="$t('enter.please')"
              />
            </a-form-item>
          </div>
        </div>
        <div class="drawer-item">
          <div class="drawer-label">
            <label>{{ $t('task.tag') }}</label>
          </div>
          <div class="drawer-control">
            <a-form-item>
              <a-input
                v-model="data.tag"
                :allow-clear="true"
                :placeholder="$t('enter.please')"
              />
            </a-form-item>
          </div>
        </div>
        <div class="drawer-item">
          <div class="drawer-label">
            <label>{{ $t('task.handler') }}</label>
          </div>
          <div class="drawer-control">
            <a-form-item>
              <a-input
                v-model="data.handler"
                :allow-clear="true"
                :placeholder="$t('enter.please')"
              />
            </a-form-item>
            <p v-html="$t('task.handler.description', {topic: data.topic, tag: data.tag, handler: data.handler})"></p>
          </div>
        </div>
        <div class="drawer-item">
          <div class="drawer-label">
            <label>{{ $t('task.condition.expression') }}</label>
          </div>
          <div class="drawer-control">
            <a-textarea
              rows="4"
              v-model="data.condition_expression"
              :placeholder="$t('task.condition.expression.placeholder')"
            />
            <p v-html="$t('task.condition.expression.description', {topic: data.topic, tag: data.tag})"></p>
          </div>
        </div>
        <div class="drawer-item">
          <div class="drawer-label">
            <label>{{ $t('task.remark') }}</label>
          </div>
          <div class="drawer-control">
            <a-form-item>
              <a-textarea
                rows="4"
                v-model="data.remark"
                :placeholder="$t('enter.please')"
              />
            </a-form-item>
          </div>
        </div>
        <div class="drawer-button">
          <a-form-item>
            <a-button type="default" :disabled="true">{{ $t('action.step.prev') }}</a-button>
            <a-button type="primary" @click="submit">{{ $t('action.submit') }}</a-button>
            <a-button type="default" @click="goNext">{{ $t('action.step.next') }}</a-button>
          </a-form-item>
        </div>
      </div>
      <div v-if="tabIndex===1">
        <div class="drawer-item">
          <div class="drawer-label">
            <label>{{ $t('task.handler.format') }}</label>
          </div>
          <div class="drawer-control">
            <a-radio-group v-model="data.handler_format">
              <a-radio value="JSON">JSON</a-radio>
              <a-radio value="XML">XML</a-radio>
            </a-radio-group>
          </div>
        </div>
        <div class="drawer-item">
          <div class="drawer-label">
            <label>{{ $t('task.handler.method') }}</label>
          </div>
          <div class="drawer-control">
            <a-input
              v-model="data.handler_method"
              :placeholder="$t('enter.please')"
            />
            <p v-html="$t('task.handler.method.description')" />
          </div>
        </div>
        <div class="drawer-item">
          <div class="drawer-label">
            <label>{{ $t('task.handler.timeout') }}</label>
          </div>
          <div class="drawer-control">
            <a-input
              type="number"
              min="1"
              max="30"
              v-model="data.handler_timeout"
              :placeholder="$t('enter.please')"
              :suffix="$t('unit.second')"
            />
            <p v-html="$t('task.handler.timeout.description', {timeout: data.handler_timeout})" />
          </div>
        </div>
        <div class="drawer-item">
          <div class="drawer-label">
            <label>{{ $t('task.delay.seconds') }}</label>
          </div>
          <div class="drawer-control">
            <a-input
              type="number"
              min="0"
              max="86400"
              v-model="data.delay_seconds"
              :placeholder="$t('enter.please')"
              :suffix="$t('unit.second')"
            />
            <p v-html="$t('task.delay.seconds.description', {seconds: data.delay_seconds, handler: data.handler})" />
          </div>
        </div>
        <div class="drawer-item">
          <div class="drawer-label"><label>{{ $t('task.threads') }}</label></div>
          <div class="drawer-control">
            <a-input
              type="number"
              min="1"
              max="50"
              v-model="data.threads"
              :placeholder="$t('enter.please')"
              :suffix="$t('unit.div')"
            />
            <p v-html="$t('task.threads.description', {threads: data.threads})" />
          </div>
        </div>
        <div class="drawer-item">
          <div class="drawer-label"><label>{{ $t('task.concurrency') }}</label></div>
          <div class="drawer-control">
            <a-input
              type="number"
              min="1"
              max="1500"
              v-model="data.concurrency"
              :placeholder="$t('enter.please')"
              :suffix="$t('unit.message')"
            />
            <p v-html="$t('task.concurrency.description', {total: data.threads * data.concurrency, concurrency: data.concurrency})" />
          </div>
        </div>
        <div class="drawer-item">
          <div class="drawer-label"><label>{{ $t('task.max.retry') }}</label></div>
          <div class="drawer-control">
            <a-input
              type="number"
              min="1"
              max="30"
              v-model="data.max_retry"
              :placeholder="$t('enter.please')"
              :suffix="$t('unit.times')"
            />
            <p v-html="$t('task.max.retry.description', {retry: data.max_retry})" />
          </div>
        </div>
        <div class="drawer-item">
          <div class="drawer-label">
            <label>{{ $t('task.store') }}</label>
          </div>
          <div class="drawer-control">
            <a-radio-group v-model="data.store">
              <a-radio :value="1">{{ $t('switch.on') }}</a-radio>
              <a-radio :value="0">{{ $t('switch.off') }}</a-radio>
            </a-radio-group>
            <p v-if="data.store===1" v-html="$t('task.store.description')" />
          </div>
        </div>
        <div class="drawer-button">
          <a-button type="default" @click="goPrev">{{ $t('action.step.prev') }}</a-button>
          <a-button type="primary" @click="submit">{{ $t('action.submit') }}</a-button>
          <a-button type="default" @click="goNext">{{ $t('action.step.next') }}</a-button>
        </div>
      </div>
      <div v-if="tabIndex===2">
        <div class="drawer-item">
          <div class="drawer-label">
            <label>{{ $t('task.response.format') }}</label>
          </div>
          <div class="drawer-control">
            <a-radio-group v-model="data.handler_response_format">
              <a-radio value="JSON">JSON</a-radio>
              <a-radio value="XML">XML</a-radio>
            </a-radio-group>
            <p v-html="$t('task.response.format.description', {handler: data.handler, format: data.handler_response_format})" />
          </div>
        </div>
        <div class="drawer-item">
          <div class="drawer-label"><label>{{ $t('task.response.expression') }}</label></div>
          <div class="drawer-control">
            <a-textarea
              rows="4"
              v-model="data.handler_response_expression"
              :placeholder="$t('task.response.expression.placeholder')"
            />
            <p v-html="$t('task.response.expression.description', {handler: data.handler, format: data.handler_response_format})"></p>
          </div>
        </div>
        <div class="drawer-item">
          <div class="drawer-label">
            <label>{{ $t('task.failed') }}</label>
          </div>
          <div class="drawer-control">
            <a-form-item>
              <a-input
                v-model="data.failed"
                :allow-clear="true"
                :placeholder="$t('task.failed.placeholder')"
              />
            </a-form-item>
            <p v-if="data.failed !== ''" v-html="$t('task.failed.description', {format: data.handler_response_format, retry: data.max_retry, method: data.failed_method, handler: data.failed})"></p>
          </div>
        </div>
        <div v-if="data.failed !== ''">
          <div class="drawer-item">
            <div class="drawer-label">
              <label>{{ $t('task.failed.method') }}</label>
            </div>
            <div class="drawer-control">
              <a-form-item>
                <a-input
                  v-model="data.failed_method"
                  :allow-clear="true"
                  :placeholder="$t('enter.please')"
                />
              </a-form-item>
              <p v-html="$t('task.failed.method.description')" />
            </div>
          </div>
          <div class="drawer-item">
            <div class="drawer-label">
              <label>{{ $t('task.failed.timeout') }}</label>
            </div>
            <div class="drawer-control">
              <a-input
                type="number"
                min="1"
                max="30"
                v-model="data.failed_timeout"
                :placeholder="$t('enter.please')"
                :suffix="$t('unit.second')"
              />
              <p v-html="$t('task.failed.timeout.description', {timeout: data.failed_timeout})" />
            </div>
          </div>
          <div class="drawer-item">
            <div class="drawer-label">
              <label>{{ $t('task.failed.response.format') }}</label>
            </div>
            <div class="drawer-control">
              <a-radio-group v-model="data.failed_response_format">
                <a-radio value="JSON">JSON</a-radio>
                <a-radio value="XML">XML</a-radio>
              </a-radio-group>
            </div>
          </div>
          <div class="drawer-item">
            <div class="drawer-label"><label>{{ $t('task.failed.response.expression') }}</label></div>
            <div class="drawer-control">
              <a-textarea rows="4" v-model="data.failed_response_expression" :placeholder="$t('task.failed.response.expression.placeholder')" />
              <p v-html="$t('task.failed.response.expression.description', {handler: data.handler, format: data.handler_response_format})"></p>
            </div>
          </div>
        </div>
        <div class="drawer-button">
          <a-button type="default" @click="goPrev">{{ $t('action.step.prev') }}</a-button>
          <a-button type="primary" @click="submit">{{ $t('action.submit') }}</a-button>
          <a-button type="default" @click="goNext">{{ $t('action.step.next') }}</a-button>
        </div>
      </div>
      <div v-if="tabIndex===3">
        <div class="drawer-item">
          <div class="drawer-label"><label>{{ $t('task.succeed') }}</label></div>
          <div class="drawer-control">
            <a-form-item><a-input v-model="data.succeed" :allow-clear="true" :placeholder="$t('task.succeed.placeholder')" /></a-form-item>
            <p v-if="data.succeed !== ''" v-html="$t('task.succeed.description', {format: data.handler_response_format, method: data.succeed_method, handler: data.succeed})"></p>
          </div>
        </div>
        <div v-if="data.succeed !== ''">
          <div class="drawer-item">
            <div class="drawer-label"><label>{{ $t('task.succeed.method') }}</label></div>
            <div class="drawer-control">
              <a-form-item>
                <a-input
                  v-model="data.succeed_method"
                  :allow-clear="true"
                  :placeholder="$t('enter.please')"
                />
              </a-form-item>
              <p v-html="$t('task.succeed.method.description')" />
            </div>
          </div>
          <div class="drawer-item">
            <div class="drawer-label">
              <label>{{ $t('task.succeed.timeout') }}</label>
            </div>
            <div class="drawer-control">
              <a-input
                type="number"
                min="1"
                max="30"
                v-model="data.succeed_timeout"
                :placeholder="$t('enter.please')"
                :suffix="$t('unit.second')"
              />
              <p v-html="$t('task.succeed.timeout.description', {timeout: data.succeed_timeout})" />
            </div>
          </div>
          <div class="drawer-item">
            <div class="drawer-label">
              <label>{{ $t('task.succeed.response.format') }}</label>
            </div>
            <div class="drawer-control">
              <a-radio-group v-model="data.succeed_response_format">
                <a-radio value="JSON">JSON</a-radio>
                <a-radio value="XML">XML</a-radio>
              </a-radio-group>
            </div>
          </div>
          <div class="drawer-item">
            <div class="drawer-label"><label>{{ $t('task.succeed.response.expression') }}</label></div>
            <div class="drawer-control">
              <a-textarea rows="4" v-model="data.succeed_response_expression" :placeholder="$t('task.succeed.response.expression.placeholder')" />
              <p v-html="$t('task.succeed.response.expression.description', {handler: data.handler, format: data.handler_response_format})"></p>
            </div>
          </div>
        </div>
        <div class="drawer-button">
          <a-button type="default" @click="goPrev">{{ $t('action.step.prev') }}</a-button>
          <a-button type="primary" @click="submit">{{ $t('action.submit') }}</a-button>
          <a-button type="default" :disabled="true">{{ $t('action.step.next') }}</a-button>
        </div>
      </div>
    </a-form>
  </div>
</template>

<script>
import { addTask } from '@/api/v1'

export default {
  data () {
    return {
      data: {
        delay_seconds: 0,
        threads: 1,
        concurrency: 10,
        max_retry: 3,
        store: 1,
        handler_format: 'JSON',
        handler_method: 'POST',
        handler_timeout: 5,
        handler_response_format: 'JSON',
        handler_response_expression: '',
        failed: '',
        failed_method: 'POST',
        failed_timeout: 5,
        failed_response_format: 'JSON',
        succeed: '',
        succeed_format: 'JSON',
        succeed_method: 'POST',
        succeed_timeout: 5,
        succeed_response_format: 'JSON'
      },
      form: this.$form.createForm(this),
      tabIndex: 0,
      tabIndexDefault: 0,
      tabIndexMax: 3,
      taskSending: false
    }
  },
  methods: {
    close () { this.$emit('update:close') },
    goTab (index) {
      if (index >= 0 && index <= this.tabIndexMax) {
        this.tabIndex = index
      }
    },
    goNext () { this.goTab(this.tabIndex + 1) },
    goPrev () { this.goTab(this.tabIndex - 1) },
    submit () {
      this.taskSending = true
      addTask(this.data, () => {
        this.taskSending = false
        this.$emit('update:submit')
      }, (err) => {
        this.taskSending = false
        this.$message.error(err)
      })
    }
  },
  name: 'AddTask',
  props: { origin: { type: Object, required: true } }
}
</script>
